<template>
  <div>
    <div id="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>角色列表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-card :bordered="false">
      <a-col>
        <template>
          <div class="record">
            <a-button icon="plus" @click="showModal">新增</a-button>
          </div>
        </template>
      </a-col>
      <div>
        <a-table
            size="middle"
            rowKey="id"
            :columns="columns"
            :data-source="roleList"
            :loading="loading"
            :pagination="false"
            @change="handleTableChange"
        >
          <template slot="role_type" slot-scope="text, record">
            <a-tag
                :color="['red','green'][record.role_type - 1]"
                v-text="['坏人','好人'][record.role_type - 1]"
            />
          </template>
          <template slot="status" slot-scope="text">
            <a-tag
                :color="text === 1 ? 'orange' : ''"
                v-text="['否', '是'][text]"
            />
          </template>
          <template slot="camp" slot-scope="text">
            <a-tag
                :color="['cyan', '', 'red'][text - 1]"
                v-text="['神职', '平民', '狼人'][text - 1]"
            />
          </template>
          <template slot="action" slot-scope="text, record">
            <div>
              <a href="javascript:;" @click="showModal(record)">
                编辑
              </a>
              <a href="javascript:;" @click="handleDeleteClick(record)">
                删除
              </a>
            </div>
          </template>
        </a-table>
      </div>
      <pagination
          :current="query.page"
          :total="query.total"
          :pageSize="query.limit"
          @change="handlePageClick"
      />
      <a-modal
          v-model="visible"
          :title="id?'编辑角色':'新增角色'"
          on-ok="handleOk"
      >
        <template slot="footer">
          <a-button key="back" @click="handleCancel">
            取消
          </a-button>
          <a-button
              key="submit"
              type="primary"
              :loading="loading"
              @click="handleOk"
          >
            保存
          </a-button>
        </template>
        <div style="display: flex; align-items: center; height: 80px">
          <div>角色名称：</div>
          <div style="display: flex;flex: 1">
            <a-input
                v-model="role"
                placeholder="请输入角色名称"
            />
          </div>
        </div>
        <div style="display: flex; align-items: center; height: 80px">
          <div>角色属性：</div>
          <div style="display: flex;flex: 1">
            <a-select v-model="role_type" style="width: 100%" :options="roleOptions"/>
          </div>
        </div>
        <div style="display: flex; align-items: center; height: 80px">
          <div>是否使用：</div>
          <div style="display: flex;flex: 1">
            <a-select v-model="status" style="width: 100%" :options="statusOptions"/>
          </div>
        </div>
        <div style="display: flex; align-items: center; height: 80px">
          <div>角色阵营：</div>
          <div style="display: flex;flex: 1">
            <a-select v-model="camp" style="width: 100%" :options="campOptions"/>
          </div>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import Pagination from '../../components/Pagination'
import qs from 'qs'

export default {
  name: 'Users',

  components: {
    Pagination
  },

  data () {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '角色',
          dataIndex: 'name'
        },
        {
          title: '角色属性',
          dataIndex: 'role_type',
          scopedSlots: { customRender: 'role_type' }
        },
        {
          title: '是否使用',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '所属阵营',
          dataIndex: 'camp',
          scopedSlots: { customRender: 'camp' }
        },
        {
          title: '创建时间',
          dataIndex: 'created_at'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      roleList: [],
      visible: false,
      loading: false,
      id: 0,
      role: '',
      role_type: '',
      status: '',
      camp: '',
      roleOptions: [{
        label: '坏人',
        key: 1
      }, {
        label: '好人',
        key: 2
      }],
      statusOptions: [{
        label: '否',
        key: 0
      }, {
        label: '是',
        key: 1
      }],
      campOptions: [{
        label: '神职',
        key: 1
      }, {
        label: '平民',
        key: 2
      }, {
        label: '狼人',
        key: 3
      }],
      query: {
        page: 1,
        total: 0,
        limit: 20
      }
    }
  },

  watch: {
    $route (to) {
      this.handleSearchClick(to.query)
      this.fetchList()
    }
  },

  mounted () {
    this.fetchList()
  },

  methods: {
    handleTableChange (...args) {
      this.handleSearchClick({
        page: 1
      })
    },
    handlePageClick (page) {
      this.handleSearchClick({
        page
      })
    },
    handleSearchClick (query = {}) {
      const tempQuery =
          Object.keys(query).length === 0
              ? {
                page: 1,
                total: 0,
                limit: 20
              }
              : this.query

      this.query = { ...tempQuery, ...query }

      if (Object.keys(query).length > 0) {
        this.$router.push({
          path: '/roles',
          query: this.query
        })
      }
    },
    fetchList () {
      this.loading = true

      const queryData = { ...this.query }

      this.$http.get(`api/admin/roles?${qs.stringify(queryData)}`).then((result) => {
        this.loading = false
        this.query = { ...this.query, ...result.pagination }
        this.roleList = result.data
      }, (error) => {
        this.loading = false
        this.query.page = 1
        this.query.total = 0
        this.roleList = []
        this.$message.error(error.message)
      })
    },
    showModal (record) {
      this.visible = true
      this.id = record.id
      this.role = record.name
      this.role_type = record.role_type
      this.status = record.status
      this.camp = record.camp
    },
    handleCancel () {
      this.visible = false
    },
    handleOk () {
      this.loading = true

      let params = {
        role: this.role,
        role_type: this.role_type,
        status: this.status,
        camp: this.camp
      }

      this.$confirm({
        title: '确认操作',
        content: '确认后将无法撤回',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.$http.post(`api/admin/roles?id=${this.id ? this.id : 0}`, params).then((result) => {
            this.$message.success(this.id ? '修改成功' : '新增成功')
            this.fetchList()
          }, (error) => {
            this.$message.error(error.message)
          }).finally(() => {
            this.visible = false
            this.loading = false
          })
        }
      })

    },
    handleDeleteClick (record) {
      this.$confirm({
        title: '确认操作',
        content: '确认后将无法撤回',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.$http.delete(`api/admin/roles/${record.id}`).then((result) => {
            this.$message.success('删除成功')
            this.fetchList()
          }, (error) => {
            this.$message.error(error.message)
          })
        }
      })
    }
  }
}
</script>

<style scoped>
#breadcrumb {
  margin-top: 0;
  margin-bottom: 10px;
}

.record {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>